<template>
  <div class="white-box">
    <title-more title="订单详情"></title-more>
    <div style="background: #F5F7FA;border: 1px solid #E8E8E8;padding: 15px 20px">
      <span>订单编号：</span>
      <span style="font-size: 16px;color: #ff5400;font-weight:bold">202412300910211015</span>
    </div>
    <el-steps style="max-width: 1000px;margin: 20px auto"  :active="2" align-center>
      <el-step title="创建订单" description="2024-12-30 09:10:21"/>
      <el-step title="买家付款" description="2024-12-30 09:10:21"/>
      <el-step title="卖家发货" />
      <el-step title="确认收货" />
    </el-steps>


    <div class="order-detail">
      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="bold">订单状态：</span>
            <span>等待卖家发货</span>
          </li>
          <li class="long">
            <span class="bold">付款方式：</span>
            <span>余额支付	&nbsp;&nbsp;</span>
            <span style="color: #f3262a">(余额支付：365.00)</span>
          </li>
          <li class="long">
            <span class="bold">配送方式：</span>
            <span>快递 </span>
          </li>
          <li class="long">
            <span class="bold">收货信息：</span>
            <span>云南省 昆明市 官渡区 关上街道海明路903号 &nbsp;&nbsp;李秀蓉 &nbsp;&nbsp;18687067198</span>
          </li>
          <li class="long">
            <span class="bold">会员ID/昵称/手机号/姓名：</span>
            <span><a href="/User/detail/id/21962127.html" target="_blank">21962127&nbsp;&nbsp;눈
				&nbsp;&nbsp;18687067198&nbsp;&nbsp;</a> </span>
          </li>
        </ul>
      </el-card>

      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>佣金信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="bold">一级分销商：</span>
            <span>张杰  </span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥36.50</span>
            <span> (实付金额(365.00) - 运费(0.00) - 成本(0)) * 佣金比例(0.1)</span>
          </li>
          <li class="long">
            <span class="bold">订货：</span>
            <span>张杰  </span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥36.50</span>
            <span> (实付金额(365.00) - 运费(0.00) - 成本(0)) * 佣金比例(0.1)</span>
          </li>
        </ul>
      </el-card>
      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>活动信息</span>
          </div>
        </template>
        <ul class="info-table mgl15">
          <li class="long">
            <span class="">买家消费获赠积分：</span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">365</span>
          </li>
          <li class="long">
            <span>买家消费获赠虚拟币：</span>
            <span style="color: #f3262a;font-weight: bold;font-size: 16px">365</span>
          </li>
        </ul>
      </el-card>
      <el-card shadow="never" class="mb20">
        <template #header>
          <div class="card-header">
            <span>物流信息</span>
          </div>
        </template>
        <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px" style="max-width: 600px;">
          <el-form-item label="到店" prop="is_tejia">
            <el-radio-group v-model="formData.is_tejia">
              <el-radio :value="1">是</el-radio>
              <el-radio :value="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="到店地址" prop="self_address_id" v-if="formData.is_tejia === 1">
            <el-select v-model="formData.self_address_id" placeholder="请选择到店地址">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.express" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="物流公司" prop="express" v-if="formData.is_tejia === 2">
            <el-select v-model="formData.express" placeholder="请选择物流公司">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.express" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item label="运单号" prop="rongji_ratio" v-if="formData.is_tejia === 2">
            <el-input v-model.trim="formData.rongji_ratio" clearable placeholder="请输入运单号"/>
          </el-form-item>
        </el-form>
      </el-card>


      <el-table class="mb20" :data="list" :header-cell-style="{ background: '#F5F7FA' }" element-loading-background="rgba(255, 255, 255, 0.6)">
        <el-table-column prop="thumb" label="主图" min-width="80" width="80">
          <template #default="{ row }">
            <el-image style="width: 65px; height: 65px; border: 1px solid rgb(204, 204, 204); padding: 3px; border-radius: 5%;" src="https://imgzh.kmmyxb.cn/gallery/5003413bd9aa34137c573314a5fa1dc4_1.png!img_200" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品" min-width="260">
          <template #default="{ row }">
            <p >抗衰系列</p>
            <p >分类：品项商品,分红商品1</p>
          </template>
        </el-table-column>
        <el-table-column prop="visible" label="编号"  width="100">
          <template #default="{ row }">
            <span>450100</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价（元）"  width="100">
          <template #default="{ row }">
            <span>¥365.00</span>
          </template>
        </el-table-column>
        <el-table-column prop="visible" label="数量"  width="100">
          <template #default="{ row }">
            <span>2</span>
          </template>
        </el-table-column>

        <el-table-column label="小计" min-width="200" width="200" fixed="right" align="left">
          <template #default="{ row }">
            <span>￥2</span>
          </template>
        </el-table-column>
      </el-table>
      <ul class="info-table" style="text-align:right;margin-bottom: 30px">
        <li class="long">
          <span class="">商品小计：</span>
          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥365.00</span>
        </li>
        <li class="long">
          <span>运费：</span>
          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥0.00 </span>
        </li>
        <li class="long">
          <span>实际支付：</span>
          <span style="color: #f3262a;font-weight: bold;font-size: 16px">¥0.00 </span>
        </li>
      </ul>
    </div>
    <div class="foot-btn flexs-center" style="margin-top: 30px">
      <el-button type="primary" size="large" :loading="btnLoading" @click="submitForm(formRef)">标记发货</el-button>
    </div>
    <go-back />
  </div>
</template>

<script setup>
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  watch,
  computed
} from "vue"
import listMixins from "@mixins/hook/list"
import {
  useRouter
} from "vue-router"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue";

const router = useRouter()
const {
  proxy
} = getCurrentInstance()
const btnLoading = ref(false)
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
  title: '',
  is_tejia:2
})
const list = ref([{},{}])
const formRule = reactive({
  title: [{required: true, message: "请输入楼盘名称", trigger: "blur"}]
})
const selectOptions = reactive({
  pianqu_id:[]
})
onMounted(() => {

})
</script>

<style lang="less">
.order-detail{
  .el-card__header{
    background: #F5F7FA;
  }

  .info-table li {
    width: 30%;
    margin-right: 1%;
    line-height: 34px
  }

  .info-table li.long {
    width: auto
  }
  .bold {
    font-weight: 700;
  }
  .mb20{
    margin-bottom: 20px;
  }

}

</style>